<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <el-form size="mini" ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item prop="num" label="申领数量" required>
          <el-radio-group v-model="form.num">
            <el-radio v-for="item in listNumber" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="order" label="排序" required>
          <el-radio-group v-model="form.order">
            <el-radio v-for="item in listOrder" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="apply_man_id" label="数据接收人" required>
          <el-select v-model="form.apply_man_id">
            <el-option v-for="item in userList" :key="item.id" :label="item.text" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-bottom: 0; margin-top: 40px">
          <div class="panel-line flex-end">
            <el-button size="mini" @click="onCancel">取消</el-button>
            <el-button size="mini" :loading="loading" type="primary" @click="onSubmit">立即申领</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { apiWxApplyAccept } from '@/api/outboundCall'
import { formatFormData } from '@/utils/index'

export default {
  name: 'DialogApply',
  props: {
    userList: Array,
    search: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      loading: false,
      listNumber: [
        { value: 10, label: 10 },
        { value: 20, label: 20 },
        { value: 50, label: 50 },
        { value: 100, label: 100 },
      ],
      listOrder: [
        { value: 0, label: '正序' },
        { value: 1, label: '倒序' },
      ],
      form: {
        num: 10,
        order: 0,
        apply_man_id: '',
      },
      rules: {
        apply_man_id: [{ required: true, message: '请选择数据接收人', trigger: 'blur' }],
      },
    }
  },
  mounted() {
    this.init()
  },
  destroyed() {},
  methods: {
    init() {
      const query = JSON.parse(localStorage.getItem('assets_apply_query2'))
      if (query) {
        for (let key in this.form) {
          this.form[key] = query[key]
        }
      }
    },
    // 取消
    onCancel() {
      this.$emit('close')
    },
    // 立即申领
    onSubmit() {
      this.$refs.form.validate((valid, message) => {
        if (valid) {
          this.loading = true
          localStorage.setItem('assets_apply_query2', JSON.stringify(this.form))
          console.log(Object.assign(this.form, this.search))
          apiWxApplyAccept(formatFormData(Object.assign(this.form, this.search)))
            .then((res) => {
              if (res.code !== 200) {
                return
              }
              this.$message({
                message: '申领成功',
                type: 'success',
              })
              setTimeout(() => {
                this.loading = false
                this.$emit('success')
              }, 1000)
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },
  },
}
</script>

<style scoped lang="scss"></style>
